<template>
	<view class="search-page">
		<view class="search flex">
			<view class="search-input flex" :style="searchInputStyle">
				<uni-icons
					class="search-input-icon"
					type="search"
					size="18"
					color="#9a9a9a"
				></uni-icons>
				<input
					v-model="keyword"
					:placeholder="placeholderReal"
					placeholder-style="color: #9a9a9a;"
				/>
				<uni-icons
					v-if="keyword"
					class="clear"
					type="clear"
					size="18"
					color="#9a9a9a"
					@click="handleClear"
				></uni-icons>
			</view>
			<view
				class="search-button"
				:style="searchButtonStyle"
				@click="handleSearch"
			>
				{{ searchText }}
			</view>
		</view>

		<template v-if="isShowList && dataList">
			<slot>
				<template v-if="dataList.length">
					
					<view class="list">
						<view class="item" v-for="(item, index) in dataList" :key="index">
							<view  @click="dataClick(item.id)">
								<view v-html="item[checked]"></view>
									<view class="desc">{{item.address}}</view>
									<view class="txt">
										<view class="num">
											<text class="num-su" v-if="item.kx_num>0">闲</text>
											<text class="num-fa" v-if="item.kx_num==0">满</text>
											<text class="num-facc" v-if="item.kx_num==0">空闲{{item.kx_num}}个插座</text>
											<text class="num-succ" v-if="item.kx_num>0">空闲{{item.kx_num}}个插座</text>
											<text class="num-allcc">共{{item.num}}个插座</text>
										</view>
										<view class="detail">去充电</view>
										<view class="clear"></view>
									</view>
									<view class="gotomap"><u-icon name="map-fill" color="#23BF61" size="20"></u-icon>
										<text>{{item.distance}}km</text>
									</view>
							</view>
						</view>
						
						
					</view>
				</template>
				<template v-else>
					<view class="empty">
					
						<view class="empty-text">暂无数据</view>
					</view>
				</template>
			</slot>
		</template>

		<template v-else>
			<template v-if="showHistory">
				<view class="log flex">
					<view class="log-title">历史搜索</view>
					<view
						v-if="historyList.length"
						class="log-text flex"
						@click="handleDelete"
					>
						<view
							v-if="deletable"
							@click.stop="deletable = false"
							style="margin-right: 2vw;"
						>
							取消
						</view>
						<view>{{ deletable ? '全部删除' : '删除' }}</view>
						<view class="log-icon">
							<uni-icons type="trash" size="18"></uni-icons>
						</view>
					</view>
				</view>
				<log-list
					:list="historyList"
					:deletable="deletable"
					@click="handleClick"
					@update="handleUpdate"
				></log-list>
			</template>

			<template v-if="showHot">
				<view class="log flex">
					<view class="log-title">热门搜索</view>
					<view class="log-icon">
						<uni-icons
							:type="isShowHot ? 'eye-slash' : 'eye'"
							size="18"
							@click="isShowHot = !isShowHot"
						></uni-icons>
					</view>
				</view>
				<log-list
					v-if="isShowHot"
					:list="hotList"
					@click="handleClick"
				></log-list>
			</template>
		</template>
	</view>
</template>

<script>
import props from './props.js';
import LogList from './log/log-list.vue';

export default {
	components: { LogList },
	mixins: [props],
	emits: ['detele', 'search', 'clear'],
	data() {
		return {
			timer: null,
			keyword: '',
			placeholderReal: '',
			dataList: [],
			historyList: [],
			deletable: false,
			isShowHot: true,
			isShowList: false
		};
	},

	watch: {
		list: {
			handler(newVal) {
				this.dataList = newVal;
				for (let item of this.dataList) {
					if (item[this.checked].includes(this.keyword)) {
						item[this.checked] = item[this.checked].replaceAll(
							this.keyword,
							`<span style=${this.highlight}>${
								this.keyword
							}</span>`
						);
					}
				}
			},
			immediate: true
		},
		keyword: {
			handler(newVal) {
				if (!newVal) {
					this.isShowList = false;
					this.changePlaceholder();
				}
			},
			immediate: true
		},
		hotList: {
			handler(newVal) {
				if (newVal.length) {
					this.placeholderReal = newVal[0];
					this.changePlaceholder();
				} else {
					this.placeholderReal = this.placeholder;
				}
			},
			immediate: true
		}
	},

	created() {
		this.handleUpdate();
	},
	beforeDestroy() {
		clearInterval(this.timer);
	},

	methods: {
		changePlaceholder() {
			if (this.showHotPlaceholder) {
				if (this.timer) clearInterval(this.timer);

				this.timer = setInterval(() => {
					let index = Math.round(
						Math.random() * (this.hotList.length - 1)
					);
					this.placeholderReal = this.hotList[index];
				}, 8000);
			} else {
				this.placeholderReal = this.placeholder;
			}
		},

		handleClear() {
			this.keyword = '';
			this.$emit('clear');
		},

		handleDelete() {
			this.deletable = !this.deletable;
			if (!this.deletable) {
				this.historyList.splice(0, 99);
				this.handleSave(null);
				this.$emit('detele');
			}
		},

		handleSearch() {
			if (!this.keyword && this.showHotPlaceholder)
				this.keyword = this.placeholderReal;

			if (!this.keyword.trim()) return;
			this.keyword = this.keyword.trim();
			clearInterval(this.timer);
			this.deletable = false;
			this.isShowList = true;

			this.historyList.unshift(this.keyword);
			let temp = [...new Set(this.historyList)];
			this.historyList.splice(0, 99);
			temp.forEach(i => {
				this.historyList.push(i);
			});

			this.handleSave(this.historyList);
			this.$emit('search', this.keyword);
		},
		dataClick(id){
			console.log(id);
			uni.navigateTo({
				url: "/pages/detail/detail-electromobile?id=" + id
			})
		},
		handleClick(item) {
			this.keyword = item;
			this.handleSearch();
		},

		handleUpdate() {
			let temp = uni.getStorageSync('historyList');
			if (temp) {
				this.historyList = [...new Set(temp)];
			} else {
				this.historyList = [];
			}
		},

		handleSave(data) {
			if (data && data.length > 10) data.pop();
			uni.setStorageSync('historyList', data);
		}
	}
};
</script>

<style lang="scss" scoped>
.search-page {
	padding: 0 5vw;

	.flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.search {
		padding: 4vw 0;

		&-input {
			justify-content: start;
			width: 64vw;
			padding: 1vw 3vw;
			border: 1px solid #bbb;
			border-radius: 1vw;

			&-icon {
				margin-right: 1vw;
			}

			.clear {
				margin-left: auto;
			}
		}

		&-button {
			padding: 1vw 3vw;
			font-size: 4vw;
			border: 1px solid $uni-color-primary;
			border-radius: 1vw;
			color: #fff;
			background-color: $uni-color-primary;
		}
	}

	.log {
		&-title {
			font-size: 4vw;
			font-weight: bold;
		}

		&-text {
			font-size: 4vw;
			color: #9a9a9a;
		}

		&-icon {
			margin-left: 1vw;
		}
	}

	.list-item {
		padding: 2vw 0;
		margin: 0 -5vw;
		background-color: #fff;
		border-bottom: 1px solid #f9f9f9;

		&-text {
			padding: 0 5vw;
			font-size: 4vw;
			font-weight: bold;
		}
	}
				.list {
					.item {
						box-shadow: 0px 0px 6px #dfdfdf;
						padding: 20rpx;
						margin-bottom: 40rpx;
						position: relative;
				
						.gotomap {
							position: absolute;
							right: 20rpx;
							top: 25rpx;
							display: flex;
							font-size: 28rpx;
							color: #333;
				
							text {
								margin-left: 3px;
							}
						}
				
						.title1 {
							font-size: 34rpx;
							font-weight: bold;
							width: 55%;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
				
						.desc {
							font-size: 30rpx;
							color: #333;
							margin-top: 10rpx;
							margin-bottom: 20rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
				
						.txt {
							font-size: 26rpx;
				
							.num {
								float: left;
								margin-top: 6rpx;
				
								.num-su {
									padding: 4rpx 8rpx;
									background: #23BF61;
									color: #fff;
									border-radius: 6rpx;
									margin-right: 15rpx;
								}
				
								.num-fa {
									padding: 4rpx 8rpx;
									background: #f10000;
									color: #fff;
									border-radius: 6rpx;
									margin-right: 15rpx;
								}
				
								.num-succ {
									color: #23BF61;
								}
				
								.num-facc {
									color: #f10000;
								}
				
								.num-allcc {
									margin-left: 15rpx;
									padding-left: 15rpx;
									border-left: 1px solid #999;
								}
							}
				
							.detail {
								font-size: 28rpx;
								color: #23BF61;
								border: 1px solid #23BF61;
								border-radius: 40rpx;
								width: 130rpx;
								text-align: center;
								line-height: 46rpx;
								float: right;
							}
						}
					}
				}
	.empty {
		margin-top: 10vw;
		text-align: center;

		&-img {
			width: 40vw;
			height: 28vw;
		}

		&-text {
			color: #bfbfbf;
			font-size: 4vw;
		}
	}
}
</style>
